<template>
  <!-- extra features start -->
  <section class="best-wrap p-t-b-80 light-gray" id="extra-feature-wrap">
    <b-container>
      <b-row>
        <b-col
          lg="6"
          md="12"
          class="mb-4"
          v-for="(item, key) in list"
          :key="key"
        >
          <a @click="emit(item)">
            <b-card class="o-hidden text-left">
              <div class="left_icon float-left w-20 p-3 text-center">
                <img v-bind:src="getIcon(item.programme.title)" />
              </div>
              <div class="right_content w-70 float-left p-3">
                <h4 class="card-title font-weight-bold">
                  {{ item.programme.title }}
                </h4>
                <p class="card-text">{{ item.programme.information }}</p>
              </div>
            </b-card>
          </a>
        </b-col>
        <!-- end of col -->
      </b-row>
    </b-container>
  </section>
</template>


<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Identicon from 'identicon.js';
import md5 from 'md5-node';
import { AxiosRequestConfig } from 'axios';
@Component
export default class HelloWorld extends Vue {
  @Prop() private type!: string;

  private list: any[] = [];
  public emit(item:any){
    
    const temp:any = window;
    if (temp.vuplex) {
      const input: any = {};
      input.projectId = item.id;
      input.title = item.programme.title;
      input.introduce = item.programme.introduce;
      temp.vuplex.postMessage({ type: 'project', json: JSON.stringify(input) });
    }
  }
  public getIcon(key: string): string {
    const icon = new Identicon(md5(key), 64);
    return 'data:image/png;base64,' + icon.toString();
  }
  public getUrl(item:any): string {
    const input: any = {};
    input.projectId = item.id;
    input.title = item.programme.title;
    input.introduce = item.programme.introduce;
    const url: string =
      'mrpp://project?input=' + encodeURI(JSON.stringify(input));
    return url;
  }
  public created() {
    if (this.type === 'own' && this.$store.state.user != null) {
      const config: AxiosRequestConfig = {};
      config.headers = {};
      config.headers.Authorization =

        'Bearer ' + this.$store.state.user.access_token;
      Vue.axios
        .get(
          this.$store.state.url.api + '/own-projects?expand=programme',
          config,
        )
        .then((response) => {
          this.list = response.data;
        });
    } else if (this.type === 'share') {
      Vue.axios
        .get(this.$store.state.url.api + '/share-projects?expand=programme')
        .then((response) => {
          this.list = response.data;
        });
    }
  }
}
</script>
